
import React, { useEffect, useState } from 'react'
import { PageHeader, Button, Descriptions } from 'antd';
import axios from 'axios';
import moment from 'moment';
import {HeartTwoTone} from '@ant-design/icons'
function Details(props) {
    const [data, setData] = useState([])
    const getData = async () => {
        let id = props.match.params.id
        const res = await axios.get(`/news/${id}?_expand=category&_expand=role`)

        setData({...res.data,view:res.data.view+1})
        axios.patch(`/news/${id}`,{
            view:res.data.view+1
        })
    }
    const handleHeart=()=>{
        let id = props.match.params.id
        setData({   
            ...data,
            star:data.star+1
        })
        axios.patch(`/news/${id}`,{
            star:data.star+1
        })
    }
    useEffect(() => {
        getData()
    }, [props.match.params.id])
    return (

        <div>
            <div>
                {
                    data && <PageHeader
                        ghost={false}
                        onBack={() => window.history.back()}
                        title={data.title}
                        subTitle={<div>
                            { data.categoryId}
                            <HeartTwoTone onClick={()=>handleHeart()} twoToneColor="#eb2f96" />
                        </div>}
                    >

                        <Descriptions size="small" column={3}>
                            <Descriptions.Item label="创建者">{data.author}</Descriptions.Item>
                            <Descriptions.Item label="发布时间">
                                {data.publishTime ? moment(data.publishTime).format("YYYY-MM-DD HH:mm:ss")
                                    : "-"
                                }
                            </Descriptions.Item>
                            <Descriptions.Item label="区域">{data.region}</Descriptions.Item>
                            <Descriptions.Item label="访问数量">{data.view}</Descriptions.Item>
                            <Descriptions.Item label="点赞数量">{data.star}</Descriptions.Item>
                            <Descriptions.Item label="评论数量">0</Descriptions.Item>
                        </Descriptions>
                    </PageHeader>

                        
                    
                }
            </div>
                <div 
                style={{border:"1px solid black",margin:"0 23px"}}
                dangerouslySetInnerHTML={{__html:data.content}}>                    
                </div>

        </div>
    )
}

export default Details
